<template>
  <div class="upload-box">
    <div class="double-box-side">
      <van-uploader
        accept="image/*"
        upload-icon="imgs/upload.png"
        :upload-text="inputMeta[0]"
        :before-read="afterRead(0)"
      >
        <van-image v-if="successImgA" fit="contain" class="resultImg" :src="successImgA"></van-image>
      </van-uploader>
      <van-uploader
        accept="image/*"
        upload-icon="imgs/upload.png"
        :upload-text="inputMeta[1]"
        :before-read="afterRead(1)"
      >
        <van-image v-if="successImgB" fit="contain" class="resultImg" :src="successImgB"></van-image>
      </van-uploader>
    </div>
    <div class="tip">
      <div>
        <p>文件大小超过200K将会被压缩</p>
      </div>
      <div>
        <p v-if="successImgA || successImgB">点击图片进行切换</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import compress from '@/utils/images'

@Component
export default class DoubleImageSide extends Vue {
  @Prop({ default: ['上传图片', '上传图片'] })
  inputMeta ?: string[]

  successImgA = ''
  successImgB = ''

  afterRead (idx: number) {
    return async (file: File) => {
      const res = await compress(file)
      this.$store.state.api.images[idx] = res
      this.$emit('dataOk', this.$store.state.api.images[0] || this.$store.state.api.images[1])
      if (idx === 0) {
        this.successImgA = 'data:image/jpeg;base64,' + res
      } else {
        this.successImgB = 'data:image/jpeg;base64,' + res
      }
    }
  }
}
</script>

<style scoped lang="less">
@import "common";
.double-box-side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 26rem;
  ::v-deep .van-uploader__upload {
    width: 20.94rem;
    height: 12.5rem;
  }
  ::v-deep .van-uploader__upload-text {
    width: 15rem;
  }
  .resultImg {
    width: 20.94rem;
    height: 12.5rem;
  }
}
</style>
